<template>

  <div id="map" class="mapview" ref="mapView">
    <managerHead style="z-index: 5;"></managerHead>  
  </div>

</template>
 
<script setup>

//import apiInterface from '../api/interface' // 引入interface，所有的访问接口
//import { get } from '../api/request' // 引入axios的二次封装
//import latlonData from '../assets/json/latlonData' // 引入axios的二次封装
import { ref, onMounted, inject, defineComponent, defineAsyncComponent } from 'vue' // vue相关方法

import { Mapbox, GaodeMap } from '@antv/l7-maps';
import { app } from '../main';

import managerHead from './managerHead.vue';
import { LayerSwitch, Scene, Map, MapTheme } from '@antv/l7';
import { LineLayer, PolygonLayer, Popup, LayerPopup, PointLayer, Fullscreen, MouseLocation, Scale } from '@antv/l7';
//import layer from './layer.vue'
import axios from 'axios'


//import head from './head.vue';
import Head from './head.vue';

import { useRoute } from 'vue-router'

//const dialogVisible = ref(false)

onMounted(async () => {
  //showmap()

  const scene = new Scene({
    id: 'map',
    map: new GaodeMap({
      style: 'grey', // 样式URL
      center: [114.50160434671074, 38.022183410316735],
      pitch: 0,
      zoom: 12,
      type: "amap",
      token: 'cd6d279d0579947bc94018daeed7a44f',
    }),
    logoVisible: false,

  });
  const map = new GaodeMap();
  map.value = scene.map


  scene.on('loaded', () => {
    // 实例化并添加插件

    scene.initControl()
    const mapTheme = new MapTheme({
      transform: (position) => {
        return position;
      },
      position: 'bottomright',
      style: 'height:50px;width:50px;margin-bottom:50px;'
    });
    scene.addControl(mapTheme);
    const a = scene.getMapContainer();
    //console.log(a)
  });



  var park_res = await axios("http://localhost:8080/park")

  var park_layer = new PolygonLayer({
    name: "石家庄公园",
    zIndex: 0,
  });
  park_layer.source(park_res.data)
    .color(
      '#00ffaa'
    )
    .shape('fill')
    .active(true);
  scene.addLayer(park_layer);

  var road_res = await axios("http://localhost:8080/road")

  var road_layer = new LineLayer({
    name: "三环内道路",
    zIndex: 1,
  }).source(road_res.data)
    // 设置道路宽度
    .size(1)
    .shape('line')
    // 设置颜色
    .color('#1990FF')
    //设置道路流线的效果
    .animate({
      interval: 1, // 间隔
      duration: 2, // 持续时间，延时
      trailLength: 2 // 流线长度
    });

  scene.addLayer(road_layer);


  scene.addImage('hos', '/src/assets/定点医院.png')

  var hospital_res = await axios("http://localhost:8080/hospital")

  var hospital_layer = new PointLayer({
    name: "石家庄医院",
    zIndex: 0,
  }).source(hospital_res.data)
    // 设置道路宽度
    .size(10)
    .shape('hos').color('#f00');

  scene.addLayer(hospital_layer);
  const hosPopup = new LayerPopup({
    items: [
      {
        layer: hospital_layer,
        fields: [
          {
            field: 'name',
            formatField: ['名称']
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(hosPopup);

  var road_layer2 = new LineLayer({
    name: "实时路况",
    zIndex: 0,
  }).source(road_res.data)
    // 设置道路宽度
    .size(1)
    .shape('line')
    // 设置颜色
    .color('color', (value) => {
      switch (value) {
        case 'darkgreen':
          return '#006400';
        case 'green':
          return '#7FFF00';
        case 'yellow':
          return '#FFD700';
        case 'orange':
          return '#FFA500';
        case 'red':
          return '#FF0000';
      }
    })

  scene.addLayer(road_layer2);


  scene.addImage('train', '/src/assets/火车站.png')
  scene.addImage('bus', '/src/assets/长途车站.png')
  var station_res = await axios("http://localhost:8080/station")

  var station_layer = new PointLayer({
    name: "石家庄车站",
    zIndex: 0,
  }).source(station_res.data)
    // 设置道路宽度
    .size(10)
    .shape('name', ['train', 'bus']).color('#ccc');

  scene.addLayer(station_layer);
  const stationPopup = new LayerPopup({
    items: [
      {
        layer: station_layer,
        fields: [
          {
            field: 'name',
            formatField: ['名称']
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(stationPopup);

  scene.addImage('policy', '/src/assets/警徽.png')
  var policy_res = await axios("http://localhost:8080/policy")

  var policy_layer = new PointLayer({
    name: "政府机构",
    zIndex: 0,
  }).source(policy_res.data)
    // 设置道路宽度
    .size(10)
    .shape('policy').color('#eeccaa');

  scene.addLayer(policy_layer);
  const policyPopup = new LayerPopup({
    items: [
      {
        layer: policy_layer,
        fields: [
          {
            field: 'name',
            formatField: ['名称']
          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(policyPopup);


  const fullscreen = new Fullscreen({
    btnText: '全屏',
    exitBtnText: '退出全屏',
    position: 'leftbottom',
  });
  scene.addControl(fullscreen)
  const mouseLocation = new MouseLocation({
    transform: (position) => {
      return position;
    },
    position: 'rightbottom',
  });
  scene.addControl(mouseLocation);
  const scale = new Scale({
    transform: (position) => {
      return position;
    },
    position: 'rightbottom',
  });
  scene.addControl(scale);

  scene.addImage('event1', '/src/assets/治安1.png')
  scene.addImage('event2', '/src/assets/治安2.png')
  scene.addImage('event3', '/src/assets/治安3.png')
  scene.addImage('event4', '/src/assets/治安4.png')
  var events_res = await axios("http://localhost:8080/events")

  var events_layer = new PointLayer({
    name: "事故总览",
    zIndex: 0,
  }).source(events_res.data)
    // 设置道路宽度
    .size(10)
    .shape('level', ['event1', 'event2','event3','event4'])
    
  scene.addLayer(events_layer);
  const eventPopup = new LayerPopup({
    items: [
      {
        layer: events_layer,
        fields: [
          {
            field: 'EventType',
            formatField: ['名称']
          }, {
            field: 'area',
            formatField: () => '所在地',

          }, {
            field: 'level',
            formatField: () => '事故等级',

          }, {
            field: 'car_num',
            formatField: () => '车牌号',

          }, {
            field: 'name',
            formatField: () => '司机',

          },
        ],
      },
    ],
    trigger: 'hover',
  });
  scene.addPopup(eventPopup);
  const a = new LayerSwitch({
    title: "图层目录树",
    btnText: "切换图层",
    layers: [park_layer, hospital_layer, station_layer, policy_layer, road_layer, road_layer2, events_layer],
    position: 'leftcenter',
    style: 'margin-bottom:740px;height:40px;z-index:20;',
    popperPlacement: 'bottom-start'
  });
  scene.addControl(a);
  app.provide("$scene_map", { scene, map })
  //dialogVisible.value = true

  //const head = () => import("./head.vue");
  //
  //new useRoute({
  //  routes: [{ path: "/head", component: head }]
  //});
})








</script>
 
<style scoped >
.mapview {
  width: 100vw;
  height: 100vh;
  position: relative;
}
</style>
 